import React, { useEffect } from 'react';
import './Header.less';
import logo from '../../assets/img/logo.png';
import logo192 from '../../assets/img/logo192.png';

import { Layout, Typography, Menu, Button } from 'antd';
import { useHistory, useLocation } from 'react-router-dom';
import { useSelector } from '../../redux/hooks';
import { currentheaderActionCreator } from '../../redux/currentheader/currentheaderActions';
import { useDispatch } from 'react-redux';
import { UserOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;

export const Header: React.FC = () => {
  const history = useHistory();
  const dispatch = useDispatch();
  const location = useLocation();
  const currentheader = useSelector(
    (state: any) => state.currentheaderReducer.currentheader
  );
  const handleClick = (e: any) => {
    dispatch(currentheaderActionCreator(e.key));
    history.push(e.key);
  };

  useEffect(() => {
    if (currentheader !== location.pathname) {
      dispatch(currentheaderActionCreator(location.pathname));
    }
  });

  return (
    <div className='app-header'>
      {/* 最顶部 */}
      <div className='top-header'>
        <div className='inner'>
          <Typography.Text>欢迎来到车云链汽配采购平台！</Typography.Text>
          <Button.Group>
            <span onClick={() => history.push('login')} className='login'>
              <UserOutlined className='iconuse' />
              请登录
            </span>
            <i>/</i>
            <span onClick={() => history.push('register')}>注册</span>
            <i>/</i>
            <span>帮助中心</span>
          </Button.Group>
        </div>
      </div>
      {/* 导航 */}
      <Layout.Header className='new_header'>
        <span onClick={() => history.push('/')}>
          <img src={logo} alt='logo' />
          {/* <Typography.Title level={3} className='title'>
            放心采购，做出好生意
          </Typography.Title> */}
          {currentheader}
        </span>
        <Menu
          mode={'horizontal'}
          selectedKeys={[currentheader]}
          onClick={handleClick}
        >
          <Menu.Item key='/'>首页</Menu.Item>
          <Menu.Item key='/InquiryIssue'>发布询价</Menu.Item>
          <Menu.Item key='/Inquiry'>询价单</Menu.Item>
          <Menu.Item key='/ShoppingCart'> 购物车 </Menu.Item>
          <Menu.Item key='4'> 订单 </Menu.Item>
          <SubMenu
            className='submenu'
            key='SubMenu'
            icon={<img src={logo192} alt='' />}
            title='个人中心'
          >
            <Menu.Item key='setting:1'>个人资料</Menu.Item>
            <Menu.Item key='setting:2'>退出登录</Menu.Item>
          </SubMenu>
        </Menu>
      </Layout.Header>
    </div>
  );
};
